<template>
<div>
  <el-table :data="tableData" stripe>
    <el-table-column prop="id" label="id"></el-table-column>
    <el-table-column prop="name" label="标题"></el-table-column>
    <el-table-column prop="body" label="正文">
      <template slot-scope="scope">
        <span>{{ scope.row.body.length > 10 ? scope.row.body.substring(0, 10) + '...' : scope.row.body }}</span>
      </template>
    </el-table-column>

    <el-table-column prop="imgage"  label="图片">
      <template v-slot="scope">
        <el-image :src="scope.row.image" :preview-src-list="scope.row.image"></el-image>
      </template>
    </el-table-column>
    <el-table-column prop="createtime" label="创建时间"></el-table-column>
    <el-table-column label="操作">
      <template v-slot="scope">
        <!--scope就是当前行的数据-->     <!--点击跳转到这个路由，带上ID-->
        <el-button type="primary" @click="$router.push('EditTese?id='+scope.row.id)" >编辑</el-button>
        <el-popconfirm
            style="margin-left: 5px"
            title="确认删除这行数据吗？"
            @confirm="del(scope.row.id)"
        >
          <el-button  type="danger" slot="reference">删除</el-button>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
</div>
</template>

<script>
import request from "@/util/request";
export default {
  name: "background",
  data(){
    return{
      tableData:[],
    }
  },
  created() {
    this.load()
  },
  methods:{
    load(){
      request.get("/wenhua/all").then(res=>{
        if (res.code=="200"){
          this.tableData=res.data
          console.log(this.tableData)
        }
      })
    },
    del(id){
      request.delete("/wenhua/delete/"+id).then(res=>{
        if (res.code=="200"){
          this.$notify.success("删除成功")
        }else{
          this.$notify.error(res.msg)
        }
      })
    }
  }
}
</script>

<style scoped>

</style>